import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import './index.scss';
import shangPingTyPic from '@/images/shopCard/029.jpg';
import shangPinpegPic from '@/images/shopCard/1761389_1000_1000.jpg';
// 引入头部组件
import Header from 'components/Header'
export default class ShangPingDatelis extends Component {
    constructor(props) {
        super(props);
        this.state = {
            addNum: 0,
            disabled: ''
        }
        this.addCard = this.addCard.bind(this);
    }

    // 点击商品加入购物车
    addCard () {
        let shangPinNum = this.state.addNum;
        if (shangPinNum  < 10) {
             ++shangPinNum;
            this.setState ({
                addNum : shangPinNum,
                disabled: ''
            })
            console.log('不够数');
        } else {
            this.setState ({
                disabled: 'disabled'
            })
        }

        console.log(this.state.addNum);
    }
    render() {
        console.log(this.props.location.productName)
        return (
            <div className="detail_main">
                <Header title={this.props.location.productName}></Header>
                {/* 图片 */}
                <div className="slide_wrap bgc-f">
                    <div className="slide"><img src={shangPinpegPic} alt="商品图"/></div>
                    <div className="slide_left_icon"><img src={shangPingTyPic} alt="商品类型图"/></div>
                </div>
                {/* 产品信息 */}
                <div className="prod_detail">
                    <div className="price_info">
                        <div className="price">
                            <span className="cur_price">￥39.9</span>
                            <span className="cost_price">￥159</span>
                            <span className="detail_text">
                                价格详情
                                <i className="query_icon iconfont icon-wenhaoyuanyiwenmianxing"> </i>
                            </span>
                        </div>
                        <strong>12人已购买</strong>
                    </div>
                    {/* <div className="downWrap" > */}
                    <div className="count_down">
                        <span>还剩21:58:7</span>
                    </div>
                    {/* </div> */}
                    <div className="normal_desc">
                        <span className="desc_iconv2 ">聚美自营</span>
                        MISTINE 雪润无瑕身体乳400ml，肌肤好到没朋友。
                    </div>

                    {/* 运费、说明 */}
                    <div className="additional-info bgc-f">
                        <div className="postage-wrap">
                            <span className="postage-type">运费</span>
                            <span className="tip-word">本商品满299或2件包邮(新疆部分地区域除外)</span>
                            <span className="iconfont icon-right"></span>
                        </div>
                        <div className="introduction-wrap additional-list">
                            {/* <div className="introductions-content">
                            </div> */}
                            <div className="introduction-fold">
                                <p className="introduction-type">说明</p>
                                <div className="introduction-list">
                                    <p className="introduction-list-title">
                                        <span className="iconfont icon-gouquan"></span>
                                        <span className="instruction-title-text"> 自营保税仓发货</span>
                                    </p>
                                    <p className="introduction-list-title">
                                        <span className="iconfont icon-gouquan"></span>
                                        <span className="instruction-title-text"> 24小时内发货</span>
                                    </p>
                                    <p className="introduction-list-title">
                                        <span className="iconfont icon-gouquan"></span>
                                        <span className="instruction-title-text"> 7天拆封无条件退货</span>
                                    </p>
                                    <p className="introduction-list-title">
                                        <span className="iconfont icon-gouquan"></span>
                                        <span className="instruction-title-text"> 视频红包可抵商品价20%</span>
                                    </p>
                                    <p className="introduction-list-title">
                                        <span className="iconfont icon-gouquan"></span>
                                        <span className="instruction-title-text"> 支持分期</span>
                                    </p>
                                </div>
                                <span className="iconfont icon-arrow"></span>
                            </div>

                        </div>
                    </div>
                </div>

                {/* 买过的人这样说 */}
                <div className="conments">
                    <p className="conment-title ">买过的人这样说</p>
                    <ul className="bd-top">
                        <li className="conment-item bd-top pr">
                            <a href="http://h5.jumei.com/fairycircle/index?product_id=2134793&amp;comment_id=606039&amp;client_v=5.0&amp;uid=&amp;verify_code=e2b8ebd14b9d032e9e672a5d84d2c538&amp;sell_type=xiannvquan&amp;sell_label=xiannvquanlist&amp;sell_params=" className="block">
                                <div className="mbottom12 clear">
                                    <div className="top-img">
                                        <img src="http://images2.jumei.com/user_avatar/080/012/80012514-64-1484704776.jpg?1484704776" alt="" className="customer-img fl"/>
                                    </div>
                                     <div className="top-info">
                                        <p className="info-name">
                                            <span >べ***娘</span>
                                            <span className="fl">
                                                <img src="http://p0.jmstatic.com/product_report/main_image/1492149266.jpg" alt="" className="c-vip"/>
                                            </span>
                                        </p>
                                        <p className="color9 ">加入聚美1404天</p>
                                    </div>
                                </div>
                                <p className="mbottom comment-text">
                                    <span className="tip_tag" >#水润好用#</span>
                                    <span className="tip_tag">#性价比高#</span>
                                    对于我来说，身体乳最基本的也是最重要的作用就是保湿，让身体保持水润，不干燥，不起皮，这款身体乳充分的满足这一点，同时也有美白效果，不是很浓稠那种，易推开，易吸收，价格实惠，满意
                                </p>
                                <div className="time-box-hidden">
                                    <span className="fs10 color9">2018-10-30</span>
                                    <span className="fs11 color9">型号: 400ml</span>
                                </div>
                            </a>
                            <p className="conment-img-list">
                                <img src="http://p12.jmstatic.com/comment/1199413940-1540865624-1478.jpg?imageslim&amp;imageView2/1/w/270/h/270" alt="" className="fl"/>
                                <img src="http://p12.jmstatic.com/comment/1199413940-1540865591-3629.jpg?imageslim&amp;imageView2/1/w/270/h/270" alt="" className="fl"/>
                            </p>
                            <p className="conment-praise">
                                <span className="iconfont icon-comm">评论</span>
                                <span className="praise-num block iconfont icon-youyong">2</span>
                            </p>
                        </li>
                    </ul>
                </div>

                {/* 购买、添加 */}
                <div className="buy-box ">
                   <div className="icon-block">
                        <Link to="/home" className="block-style">
                            <span className="iconfont icon-PageCopy"></span>
                            店铺
                        </Link>
                        <Link to="/shopCar" className="block-style">
                            <span className="iconfont icon-gouwudai"></span>
                            购物车
                            <span className="addNum">{this.state.addNum}</span>
                        </Link>
                   </div>
                    <div className="button-block">
                        <button className="add-shopping-cart add-shopping-cart-new" onClick={this.addCard} disabled={this.state.disabled}>加入购物车</button>
                        <button className="add-shopping-cart add-shopping-cart-direct">立即购买</button>
                    </div>

                </div>
            </div>
        )
    }
}
